<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
  
  <head>
  
    <title>
      Social Content Based Similarity Search
    </title>
    <style type="text/css" media="all">
      @import "${pageContext.request.contextPath}/assets/stylesheets/simSearch.css";
    </style>
    <style type="text/css" media="all">
    	@import "${pageContext.request.contextPath}/assets/stylesheets/jquery-ui-1.10.3.custom.min.css";
    </style>   
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    
  </head>
  
  <body id="simSearchHome">
		
		<div id="header" class="headerBox">
      <span class="headerElement">
        <a href="logout">Logout</a> 
      </span>
    </div>
    		  
    <div id="homeBox" class="outerContentBox">
      
      <div id="contentDocumentBox" class="innerContentBox">
        <p class=contentDesc>Document ...</p>
        <div class="contentGroupingBox">
          <p class=contentDesc>Search</p>
          <div id="contentSearchInputBox" class="formBox">
            <form>
              <input id="contentSearchInputText" type="text" name="searchText" list="autoComplList">
            </form>
          </div>
          <div id="contentGo"  class="linkBox">
            <p class="linkText">Go!</p> 
          </div>
          <div id="advancedSearchLink" class="linkBox">
            <p class="linkText">Advanced Search</p>
          </div>
        </div>
        <div id="docUploadBox" class="contentGroupingBox">
          <p class=contentDesc>Upload</p>
          <div id="docUpload" class="linkBox">
            <p class="linkText">Upload a new Document</p>
          </div>
        </div>  
      </div>
      
      <div id="advancedSearchBox" class="innerContentBox">
        <p class=contentDesc>Advanced Search</p>
        <div class="contentGroupingBox">
          <div id="groupSearchInputBox" class="formBox">
            <form id="advancedSearchForm">
            	<p class=formDesc>Search files by / in ... </p>
              	<input id="advancedSearchNameTagContentDescText" type="text" name="searchText" list="autoComplList">
              	<div class="radioButtonContainer">
              	  <input id="radioSearchName" type="radio" name="advfilesearch" value="name">Name
                </div>
                <div class="radioButtonContainer">
                  <input id="radioSearchDescription" type="radio" name="advfilesearch" value="description">Description
                </div>
                <div class="radioButtonContainer">
                  <input id="radioSearchCategory" type="radio" name="advfilesearch" value="category">Category
                </div>
                <div class="radioButtonContainer">
                  <input id="radioSearchCategory" type="radio" name="advfilesearch" value="all">All Available Sources
                </div>
                <div class="checkBoxContainer">
                  <input id="checkBoxSearchContent" type="checkbox" name="advfilesearchcheckbox">Filter by Trustful Users?
                </div>
                <div class="checkBoxContainer">
                  <input id="checkBoxSearchContentPrefs" type="checkbox" name="advfilesearchcheckboxprefs">Filter by preferences?
                </div>
            </form>
          </div>
          <div id="advancedGo" class="linkBox">
            <p class="linkText">Go!</p>
          </div>
        </div>
      </div>
      
      <div id="groupSearchBox" class="innerContentBox">
        <p class=contentDesc>Groups ...</p>
        <div class="contentGroupingBox">
          <p class=formDesc>Search</p>
          <div id="groupSearchInputBox" class="formBox">
            <form>
              <input id="groupSearchInputText" type="text" name="searchText">
            </form>
          </div>
          <div id="groupGo" class="linkBox">
            <p class="linkText">Go!</p>
          </div>
        </div>
      </div>

		<div id="contentUploadBox" class="innerContentBox">
			<p class=contentDesc>Upload</p>
			<div id="fileUploadInputBox" class="formBox">
				<form>
					<input type="file" id="fileUploadInput">
				</form>
				
        <div id="addContentDescriptionBox" class="formBox">
          <p class="formDesc">Content Description:</p> 
          <form id="addContentDescForm">
            <input id="addContentDescInputText" type="text" name="contDescText">
          </form>
        </div>
        
				<div id="addCategoryInputBox" class="formBox">
				  <p class="formDesc">Category:</p> 
					<form id="addCategoryForm">
						<input id="addCategoryInputText" type="text" name="searchText">
					</form>
				</div>

				<form >
					<p>Select the desired content:</p>
					<div class="radioButtonContainer">
						<input id="radioContentMusic" type="radio" name="content" value="Music"> Music
					</div>
					<div class="radioButtonContainer">
						<input id="radioContentPicture" type="radio" name="content" value="Picture"> Picture
					</div>
					<div class="radioButtonContainer">
						<input id="radioContentText" type="radio" name="content" value="Text"> Text
					</div>
				</form>
			</div>
			<div id="uploadProgressContainer"></div>
			<div id="uploadGo" class="linkBox">
				<p class="linkText">Go!</p>
			</div>
		</div>

      <div id="accountSettingsBox" class="innerContentBox">
        <p class=contentDesc>Account Settings</p>      
        <div class="contentGroupingBox">
	        <div id="changePasswordInputBox" class="formBox">        	
						<form>
							<p class="formDesc">Old Password</p>
							<input id="oldPasswordInputText" type="password" name="oldPassword">
	  	      	<p class="formDesc">New Password</p>
							<input id="changePasswordInputText" type="password" name="changePassword">
							<p class="formDesc">Repeat new Password</p>
							<input id="repeatChangePasswordInputText" type="password" name="repeatChangePassword">
						</form>
					</div>
					<div id="changePasswordGo" class="linkBox">
						<p class="linkText">Change Password</p>
					</div>
				<div id="deleteAccountGo" class="linkBox">
						<p class="linkText">Delete Account</p>
					</div>
				
				</div>

      </div>
      
      <div id="addPreferenceBox" class="innerContentBox">
        <p class=contentDesc>Add a new Preference</p>
          <div id="addPreferenceInputBox" class="formBox">
            <form id="addPreferenceForm">
              <input id="addPreferenceInputText" type="text" name="searchText">
            </form>
          </div>
      </div>
      
      <div id="backHome" class="goBackBox">
        <p class=contentDesc>Home</p>
        <div id="backHomeLinkBox" class="linkBox">
          <p class="linkText">Go Back to Home</p>
        </div>
      </div>
      
      <div id="accountBox" class="innerContentBox">
        <p class=contentDesc>Your Account</p>
        <div id="preferenceSettings" class="linkBox">
          <p class="linkText">Preference Settings</p>
        </div>
        <div id="accountSettings" class="linkBox">
          <p class="linkText">Account Settings</p>
        </div>
        <div id="manageAndViewGrps" class="linkBox">
          <p class="linkText">Manage and View Your Groups</p>
        </div>
        <div id="logout" class="linkBox">
          <p class="linkText">Logout</p>
        </div>
      </div>
      
      <div id="ownGroupsBox" class="innerContentBox">
        <p class=contentDesc>Your Groups</p>
        <div id="newGroupLinkBox" class="linkBox">
          <p class="linkText">New Group</p>
        </div>
        <div id="memberShipBox" class="contentGroupingBox">
          <p class=contentDesc>Membership</p>
          
        </div>
      </div>
      
      <div id="resultBox" class="innerContentBox">
        <p class=contentDesc>Search Result</p>
      </div>
       

		<div id="showGroupBox" class="innerContentBox">
			<p class=contentDesc>Selected Group</p>
			<div id="showGroupOptions" class="linkBox">
				<p id="showGroupOptionsText" class="linkText">
				</p>
			</div>

		</div>

		<div id="createGroupBox" class="innerContentBox">
			<p class=contentDesc>Create Group</p>
			
			<div id="createGroupInputBox" class="formBox">
				<form>
					<input id="createGroupInputText" type="text" name="groupName">
					
				</form>
			</div>
			<div id="createGroupGo" class="linkBox">
				<p class="linkText">Create group with this name</p>
			</div>
		</div>
		
		<div id="ownPreferencesBox" class="innerContentBox">
			<p class=contentDesc>My Preferences</p>

			<form>
				<p>Deselect the preferences you want to remove:</p>
				<div id="selectOwnPreferences" > 
				</div>
			</form>
			<div id="selectPreferencesGo" class="linkBox">
				<p class="linkText">Save Changes</p>
			</div>

		</div>
	
	  <div id="addCategoriesAdminBox" class="innerContentBox">
      <p class=contentDesc>Create new Categories:</p>
      <div class="formBox">
		    <form id="createCategoryForm">
	        <p>Category Name:</p>
	        <input id="createCategoryInputText" type="text" name="categoryName">
	        <p>Content Type:</p>
          <div class="radioButtonContainer">
             <input id="radioContentTypeMusic" type="radio" name="contentType" value="Music"> Music
           </div>
           <div class="radioButtonContainer">
            <input id="radioContentTypePicture" type="radio" name="contentType" value="Picture"> Picture
          </div>
           <div class="radioButtonContainer">
            <input id="radioContentTypeText" type="radio" name="contentType" value="Text"> Text
          </div>
        </form>
      </div>
	    <div id="createCategoryGo" class="linkBox">
        <p class="linkText">Create</p>
      </div>
	  </div>

	</div>
    
    <div id="footer" class="footerBox">
      <span id="leftFooter" class="footerElement">
        SimSearch 
      </span>
      <span id="rightFooter" class="footerElement">
        TUHH 
      </span>     
    </div>
    
    <datalist id="autoComplList"></datalist>
    
  </body>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="${pageContext.request.contextPath}/assets/javascript/simSearch.js"></script>
  
</html>